<script lang="tsx">
import * as _ from "lodash";
import { PropType, defineComponent } from "vue";

import { Props, Column } from "./interface";

export default defineComponent({
  props: {
    column: {
      type: Array as PropType<Column[]>,
      default() {
        return [];
      },
    },
    row: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  setup(props: Props, { slots }) {
    return () => {
      const _getCellVal: any = (row: any, col: Column) => {
        return (col.render && col.render(row)) || _.get(row, col.key);
      };
      return (
        <div class="page-loader">
          {slots.default ? (
            <div class="loader_customize">
              {props.row.map((row: any, rowKey: any) => {
                return (
                  <div key={rowKey} class="customize_item">
                    {slots.default?.({
                      row,
                    })}
                  </div>
                );
              })}
            </div>
          ) : (
            <table class="loader_table" cellspacing="0">
              <thead>
                <tr>
                  {props.column.map((col: Column, colKey: any) => {
                    return <th key={colKey}>{col.label}</th>;
                  })}
                </tr>
              </thead>
              <tbody>
                {props.row.map((row: any, rowKey: any) => {
                  return (
                    <tr key={rowKey}>
                      {props.column.map((col: Column, colKey: any) => {
                        return <td key={colKey}>{_getCellVal(row, col)}</td>;
                      })}
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </div>
      );
    };
  },
});
</script>

<style lang="less">
.page-loader {
  width: 100%;
  table {
    width: 100%;
    thead {
      width: 100%;
      background: @background-color-base;
      tr {
        position: relative;
        th {
          position: relative;
          font-size: @font-size-large;
          padding: 20px 10px;
          text-align: left;
          &:before {
            position: absolute;
            top: 50%;
            left: 0;
            content: "";
            width: 1px;
            height: 60%;
            transform: translateY(-50%);
            background: @border-color-split;
          }
        }
        &:after {
          position: absolute;
          bottom: 0;
          left: 0;
          content: "";
          width: 100%;
          height: 1px;
          background: @border-color-base;
        }
      }
    }
    tbody {
      width: 100%;
      tr {
        td {
          padding: 20px 10px;
          text-align: left;
          font-size: @font-size-base;
        }
      }
    }
  }
}
</style>
